<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<z-tabs :list="tabList" @change="tabChange" />
			</template>

			
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="con_box" v-for="(item,index) in dataList" :key="item.id" @click="itemClick(item)">
				<view class="photo">
					<image :src="item.thumb" mode=""></image>
				</view>
				
				<view class="text_con">
					<view class="title">
						{{item.title}}
					</view>
					<view class="addtime">
						{{item.add_time}}
					</view>
					<view class="desc">
						 {{item.desc}}
					</view>
				</view>
			</view>
			
		</z-paging>

	</view>
</template>
<script>
	export default {
			data() {
				return {
					dataList: [],
					tabList: ['国内','国外','图集','社区'],
					tabIndex: 0
				}
			},
			onLoad(op) {
				this.id  = op.id
				
			},
			onReady() {
				
				
			},
			methods: {
				tabChange(index) {
					this.tabIndex = index;
					this.$refs.paging.reload(true);
				},
				queryList(pageNo, pageSize) {
					const params = {
						page: pageNo,
						limit: pageSize,
						type: this.tabIndex + 1 //tab的索引，默认从1开始，后台根据这个处理并返回对应的TAB数据
					}

					this.$api.getList(params).then(res => {
						//console.log('list', res.data);
						if (res.code == 0) {
							this.$refs.paging.complete(res.data);
						}else{
							this.$refs.paging.complete(false);
						}
					})

				},
				itemClick(item) {
					uni.navigateTo({
					    url:'./detail?id='+item.id
					});
				}

				
			}
		}
	</script>
<style lang="scss">
	
.con_box{
	display: flex;
	flex-direction: nowarp;
	height:240rpx;
	margin:20rpx;
	border-bottom: 1rpx solid #efefef;
	.photo{width:240rpx;height:150rpx}
	.photo image{width:240rpx;height:150rpx}
	.text_con{
		flex:1 ;
		margin-left:30rpx;
		.title{
			font-weight: bold;
			font-size: 28rpx;   
		} 
		.addtime{color:#e3e3e3; line-height: 60rpx;}
		.desc{color:#e9e9e9;
				overflow: hidden;
				text-overflow: ellipsis;  /* 超出部分省略号 */
				display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 2; /** 显示的行数 **/
			}
	}
	

}
</style>